<template>
  <div class="seach">
    <h1 class="center_man">个人中心</h1>
    <br>
    <hr>
<!-- Button trigger modal -->
<div class="">
<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">全部订单</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">已完成订单</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">取消的订单</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">个人中心</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <div v-for="(val, index) in shopping" :key="index">
                <img :src="val.img" class="img_smaller" alt=""  />
                   <span class="price_shopping">{{val.name}}</span>
                   <span class="price_shopping">￥ {{val.price}}</span>
                   <span class="price_shopping">x {{val.snum}}</span>
        </div>
        </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    
  </div>
</template> 


<style lang="less">
.bgc-big img {
  width: 100%;
  height: 150px;
  margin-top: 6px;
}
.new_price,
.taste_left {
  font-size: 16px;
  color: #816b4e;
}
.aha_entrance img {
  width: 445px;
}
.btn_1 {
  margin-top: 7px;
  background-color: #fff;
  border: 1px solid #eee;
  color: pink;
}
.btn_2 {
  width: 100px;
  height: 48px;
  font-size: 16px;
  background-color: #634832;
  border: 1px solid #eee;
  color: rgb(255, 255, 255);
  padding-top: 5px;
  margin-right: 15px;
  position: relative;
  top: -6px;
}
.xinxin p {
  background-color: #fff;
  color: #816b4e;
  font-size: 20px;
}
.xinxin span {
  font-size: 16px;
  background-color: #fff;
  color: #c58181;
  margin: -2px 0 0 5px;
}
.f_left span {
  font-size: 16px;

  color: #816b4e;
}
.f_left p {
  margin-top: 7px;
  font-size: 16px;

  color: #816b4e;
}
.you {
  padding-left: 3px;
}
.you span {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 49px;
  border: 1px solid #f0f2f3;
  background-color: #fff;
  transition: 0.3s;
}
.you input {
  background-color: #fff;
  outline: none;
  width: 50px;
  height: 49px;
  text-align: center;
  border: 1px solid #f0f2f3;
}
.cheng_fen h5 {
  font-weight: bold;
  margin-top: 13px;
  font-size: 16px;
}
.cheng_fen h5 span {
  margin-top: 10px;
  margin-left: 20px;
  color: #ac8585;
}
.leng_d {
  font-size: 24px;
  color: rgb(113, 238, 238);
}
.zzz {
  margin: -10px 0 0 20px;
  font-size: 14px;
  color: #665e5e;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
.img_smaller{
  width: 200px;
  height: 200px;
}

</style>

<script>
export default {
  data() {
    return {
      shopping:0
    };
  },
  mounted() {
    if(localStorage.getItem(localStorage.getItem("username")+1)!=""){
      var shopping = localStorage.getItem(localStorage.getItem("username")+1);
      shopping=JSON.parse(shopping);
    
     this.shopping=shopping
    // console.log(this.shopping);
    }
    

  }
};
</script>